import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView,
    PixelRatio,
    Dimensions,
    Navigator
} from 'react-native';

import Hello from './fenleiPage/Hello'


const designHeight = Dimensions.get('window').height;
let screenHeight = Dimensions.get('window').height;
let designWidth = Dimensions.get('window').width;
let screenWidth = Dimensions.get('window').width;
let width = Dimensions.get('window').width;
let height = Dimensions.get('window').height;
// 引用头部组件

import { DrawerNavigator, StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
import Search from "../search/search";
import Simple from "./Simple";
let studentData=require('./Data');

export default class fenlei extends Component {
   constructor(props){
       super(props);
       this.state = {
           leftCategoryDate:studentData.leftCategoryDate,
           selectCategoryIndex:0,
           rightDate:studentData.rightDate
       }
   }


   categoryClick(index){
       this.setState({
           selectCategoryIndex:index,
       })
   }

   leftRenderRow(){
       let leftDom = [];
       for(let i=0; i<this.state.leftCategoryDate.length;i++){
           leftDom.push(
               <TouchableOpacity activeOpacity={1} onPress={this.categoryClick.bind(this,i)} key={i}>
                    <View key={i} style={{
                        height: 50,
                        backgroundColor: this.state.selectCategoryIndex === i ? 'white' : '#436EEE',
                        justifyContent: 'center',
                        alignItems: 'center',
                        // borderBottomWidth: this.state.selectCategoryIndex === i ? 0 : 1 / PixelRatio.get() ,
                        // borderBottomColor: 'rgb(200,200,200)',
                        borderBottomWidth:1,
                        borderBottomColor:'white'
                    }}>
                        <Text>{this.state.leftCategoryDate[i]}</Text>
                    </View>
               </TouchableOpacity>
           )
       }
       return(
           leftDom
       )
   }

   rightRenderRowItem(index){
       let rowItemDom = [];
       for(let i=index; i<3+index && i<this.state.rightDate[0][this.state.selectCategoryIndex].length;i++){
           rowItemDom.push(
               <View key={i} style={{alignItems:'center'}}  >
                   <TouchableOpacity>
                       <Image source={{uri:this.state.rightDate[0][this.state.selectCategoryIndex][i].img}}
                              style={{
                                  height:80,
                                  width:80
                              }}
                              resizeMode={'cover'}
                      />
                   </TouchableOpacity>
                    <Text style={{marginTop:10/designHeight*screenHeight}}>
                        {this.state.rightDate[0][this.state.selectCategoryIndex][i].name}
                    </Text>

               </View>
           )
       }
       return(
           rowItemDom
       );
   }

   rightRenderRow(){
        let rightDom = [];
        for(let i=0; i < this.state.rightDate[0][this.state.selectCategoryIndex].length; i+=3){

        rightDom.push(
                 <View key={i} style={{
                     flexDirection:'row',
                     justifyContent:'space-around',
                     marginTop:30/designHeight*screenHeight
                 }}>
                     {this.rightRenderRowItem(i)}
                 </View>
        )
    }
    return(
        rightDom
    );
}
    // 头部中间
    renderTitleItem() {
        return (
            <TouchableOpacity onPress={() => { this.props.navigation.navigate('Search') }}>
                <View style={styles.searchBox}>
                    <Image source={require('../../img/search.png')} style={styles.searchIcon} />
                    <Text style={styles.searchContent}>搜索商品, 共10161款好物</Text>
                </View>
            </TouchableOpacity>
        )
    }



    render() {
        return (
            <View style={styles.container}>
                <View style={{flex:2}}>
                    <ScrollView showsVerticalScrollIndicator={false}>
                        { this.leftRenderRow() }
                    </ScrollView>
                </View>
                <View style={{flex:6}}>
                    <ScrollView showsVerticalScrollIndicator={false}>
                        { this.rightRenderRow() }
                    </ScrollView>
                </View>
            </View>
    );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 7,
        backgroundColor: 'white',
        flexDirection:'row'
    },
    searchBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: width * 0.9,
        backgroundColor: '#ededed',
        borderRadius: 5,
        height: 30,
    },
    searchIcon: {
        width: 16,
        height: 16,
        marginRight: 6,
    },
    leftMenu: {
        width: 80,
        height: height,
        marginTop:2,
        borderRightWidth: 1,
        borderRightColor: '#ededed'
    },
    leftView: {


    },
    leftText: {
        textAlign:'center',
        marginTop:5,
    },
    rightView:{

    }
});